<!doctype html>
<html lang="zh">
<head>
  <meta charset="utf-8">
  <title>KISSY - 全终端适配的 JS 类库</title>
  <meta name="viewport" content="width=device-width">
  <link href="http://fonts.googleapis.com/css?family=Droid+Sans|Lekton|Ubuntu+Mono:400,700" rel="stylesheet">
	<link rel="stylesheet" href="templates/assets/bootstrap.css">
	<link href="templates/assets/normalize.css" rel="stylesheet">
	<link href="templates/assets/kissy.css" rel="stylesheet">
	<link href="templates/assets/prettify.css" rel="stylesheet">
	<link href="templates/assets/forkit.css" rel="stylesheet">
	<script src="templates/assets/jquery.min.js"></script>
	<script src="templates/assets/script.js" type="text/javascript"></script>
	<script src="http://g.tbcdn.cn/trip/kissy/1.4.0/seed-min.js"></script>
	<script src="api/assets/highlight.pack.js"></script>
	<link href="api/assets/tomorrow-night-bright.css" rel=stylesheet />
	<link rel="shortcut icon" href="http://a.tbcdn.cn/s/kissy/favicon.ico">
</head>

<body class="">
    <nav id="sidebar">
    <header>
		<a href="index.html">
			<!--img src="http://gtms04.alicdn.com/tps/i4/T1ceiPFbpcXXcljp_h-200-89.png"-->
			<!--img src="templates/assets/img/logo_6.png"-->
			<!--img src="http://gtms04.alicdn.com/tps/i4/T14oa2FcNcXXaOySEh-180-104.png" alt="" /-->
			<!--img src="http://gtms01.alicdn.com/tps/i1/T1Amq1FaXgXXbXVSUh-180-127.png" alt="" /-->
			<img src="http://gtms02.alicdn.com/tps/i2/T1N0jTXXXjXXay7Rri-175-78.png" alt="" />
		</a>
	</header>
    <ul>
      <li class="nav-divider"><a href="index.html"><img src="templates/assets/img/icon-home.png">首页</a></li>
      <li class="nav-divider"><a href="why-kissy.html"><img src="templates/assets/img/icon-why.png">Why KISSY?</a></li>
      <li><a href="get-started.html"><img src="templates/assets/img/icon-getting-started.png">KISSY 1.4.x 教程大纲</a></li>
      <li class="nav-sub"><a href="module-map.html">核心模块列表</a></li>
      <li class="nav-sub"><a href="kmd.html">KISSY 模块规范 (KMD)</a></li>
      <li class="nav-sub"><a href="gbs.html">浏览器兼容基准(GBS)</a></li>
      <li class="nav-sub"><a href="http://cyj.me/jquery-kissy-rosetta/">jQuery KISSY 对比手册</a></li>
      <li class="nav-sub"><a href="http://gallery.kissyui.com/guide">KISSY 组件开发规范</a></li>
      <li class="nav-sub nav-divider"><a href="history.html">历史版本</a></li>
      <li><a href="">API Doc</a></li>
      <li><a href="http://demo.kissyui.com">Demos</a></li>
      <li class="nav-divider"><a href="http://gallery.kissyui.com">KISSY Gallery</a></li>
      <li><a href="tools.html">KISSY 项目构建工具</a></li>
      <li class="nav-sub"><a href="kmc.html">KS Module Compiler</a></li>
      <li class="nav-sub"><a href="http://abc.f2e.taobao.net">ABC</a></li>
      <li class="nav-sub nav-divider"><a href="clam.html">Clam</a></li>
      <li><a href="third-party-lib.html">第三方代码库</a></li>
      <li class="nav-sub"><a href="https://github.com/lorrylockie/tpap/wiki">面向第三方安全的 KISSY</a></li>
      <li class="nav-sub"><a href="http://www.builive.com/demo/index.php">BUI</a></li>
      <li class="nav-sub nav-divider"><a href="http://work.tmall.net/muidoc/build/">MUI</a></li>
      <li><a href="https://github.com/kissyteam/kissy/blob/master/CONTRIBUTING.md">为 KISSY Core 贡献代码</a></li>
      <li class="nav-sub"><a href="http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml">HTML/CSS编码规范</a></li>
      <li class="nav-sub nav-divider"><a href="http://docs.kissyui.com/source/tutorials/style-guide/google/javascriptguide.xml">JavaScript 编码规范</a></li>
	  <li><a href="upgrade.html"><img src="templates/assets/img/icon-documentation.png">1.3.x->1.4.0 升级指南</a></li>
	  <li><a href="faq.html"><img src="templates/assets/img/icon-faqs.png">FAQ</a></li>
      <li><a href="https://github.com/kissyteam/kissy"><img src="templates/assets/img/icon-github.png">GitHub</a></li>
	  <li><a href="core-team.html"><img src="templates/assets/img/icon-google-plus.png">KISSY 核心小组</a></li>
    </ul>
  </nav>

  <div id="content">
    <article>
      

	<h1>anim</h1>
<p>KISSY 动画，这样来载入anim模块：</p>
<pre><code>KISSY.use(&#39;anim&#39;,function(S,Anim){
    // use Anim
});</code></pre>
<p>由于<code>node</code>模块依赖<code>anim</code>，通常我们使用node时，使用node.animate()方法即可对某个已知节点作动画。即</p>
<pre><code>KISSY.all(&quot;.foo&quot;).each(function(n){
    new KISSY.Anim(n,...).run();
});</code></pre>
<p>等价于</p>
<pre><code>var node=KISSY.all(&quot;.foo&quot;);
node.animate({
    width:100,
    height:300
}, {
    duration: 2000,
    easing:&#39;easeBoth&#39; ,
    complete: function () {}
});</code></pre>
<p>此外，node节点还挂载一些常用的做动画的函数，比如fadeIn、fadeOut、slideUp、slideDown等（<a href="node.html">具体请参照Node</a>）。来看这个例子，每张图片获取之后, 先不显示出来, 等图片加载完成之后, 调用 fadeIn() 渐进显示：</p>
<p><div class="demo"><button id="fetch-btn-anim" autocomplete="off" type="button" class="btn btn-default">Fetch Photo</button><div id="photo-list"></div></div></p>
<script>
KISSY.use('node',function (S,Node) {
     var $=Node.all;
     var API = 'http://api.flickr.com/services/rest/?',
         params = {
             'method': 'flickr.favorites.getPublicList',
             'api_key': '5d93c2e473e39e9307e86d4a01381266',
             'user_id': '26211501@N07',
             'per_page': 10,
             'format': 'json',
             'jsoncallback': 'getFavorites'
         },
         photoList = $('#photo-list');

     $('#fetch-btn-anim').on('click', function() {
         $(this).attr('disabled', true);
         photoList.addClass('loading');
         S.getScript(API + S.param(params));
     });

     window.getFavorites = function(data) {
         var html = 'Fetch photo failed, pls try again!',
             loading = true;

         if (data.stat === 'ok') {
             html = '';
             S.each(data.photos.photo, function(item, i){
                 html += '<img style="display:none" src="http://farm' + item.farm + '.static.flickr.com/'
                         + item.server + '/' + item.id + '_' + item.secret + '_t.jpg" />';
             });
         }

         photoList.html(html).all('img').each(function(img) {
             img.on('load', function() {
                 if(loading) {
                     photoList.removeClass('loading');
                     loading = false;
                 }
                 img.fadeIn(3);
             });
         });
     }
 });
</script>

<h2>实例化动画的传参</h2>
<p>刨除直接通过node.animate()创建的动画之外，通过Anim可以生成一个<code>动画实例</code>。动画实例是用来描述动画的一些基本属性，比如，从<code>什么状态</code>动画到<code>什么状态</code>，动画时间，缓动效果，暂停和继续动画等。通过<code>Anim</code>这样实例化一个动画实例（<a href="http://docs.kissyui.com/source/raw/demo/anim/demo1.html">参照Demo</a>）：</p>
<pre><code>KISSY.use(&quot;anim&quot;,function(S,Anim){
    // 初始化动画实例
    var anim = Anim(&#39;#anim-el&#39;,
        // 动画目标样式
        {
            &#39;background-color&#39;:&#39;#fcc&#39;,
            &#39;border-wdith&#39;:&#39;5px&#39;
        },
        // 动画时长，秒
        5,
        // 动画特效
        &#39;bounceOut&#39;,
        // 动画结束的回调
        function(){
            alert(&#39;动画结束&#39;);
        });

    // 开始执行动画
    anim.run();
});</code></pre>
<p>第一种传参格式，这也是完整的传参格式</p>
<p><code>Anim (elem, props[, duration, easing, completeFn])</code></p>
<p>各参数含义：</p>
<ul>
<li>elem：（String|HTMLElement|Node|window）用于作动画的DOM元素或者窗口，窗口仅支持scrollTop和scrollLeft</li>
<li>props：JSON 对象，表示动画终止时节点的样式，如果设置为scrollLeft或scrollTop，这时会对元素的滚动属性产生动画</li>
<li>duration：（Number），动画持续的秒数，默认为1</li>
<li>easing：（String）缓动效果，也称为“平滑函数”，效果可<a href="http://docs.kissyui.com/source/raw/demo/anim/easing.html">参照这里</a>。取值包括：<ul>
<li>easeNone</li>
<li>easeIn</li>
<li>easeOut</li>
<li>easeBoth</li>
<li>easeInStrong</li>
<li>easeOutStrong</li>
<li>easeBothStrong</li>
<li>elasticIn</li>
<li>elasticOut</li>
<li>elasticBoth</li>
<li>backIn</li>
<li>backOut</li>
<li>backBoth</li>
<li>bounceIn</li>
<li>bounceOut</li>
<li>bounceBoth</li>
</ul>
</li>
<li>completeFn：（function），动画结束时的回调</li>
</ul>
<p>Anim 的第二种用法</p>
<p><code>Anim (elem, props[, config])</code></p>
<ul>
<li>elem (String|HTMLElement|KISSY.Node|window) – 作用动画的元素节点.</li>
<li>props (Object) – 动画结束的 dom 样式值</li>
<li>config (Number) – JSON 对象，动画配置，包括<ul>
<li>duration，动画持续事件，Number，单位为秒，默认为1</li>
<li>easing，（string|function），默认easeNone，动画平滑函数</li>
<li>queue，（String|false|undefined）所属队列名称，默认undefined，属于系统内置队列, 设置 false 则表示该动画不排队立即执行.</li>
<li>complete，（function）动画结束后的回调</li>
</ul>
</li>
</ul>
<p><a href="http://docs.kissyui.com/docs/html/demo/core/anim/demo6.html">动画队列的Demo</a></p>
<h2>Anim 动画实例的方法</h2>
<p>Anim动画实例上可调用这些方法</p>
<h4>isRunning()</h4>
<p>判断当前动画对象是否在执行动画过程中</p>
<h4>isPaused()</h4>
<p>判断当前动画是否被停止</p>
<h4>run()</h4>
<p>开始当前动画</p>
<h4>stop()</h4>
<p>结束当前动画</p>
<pre><code>// 终止当前动画，动画会在当前帧直接停止（不触发 complete 回调）. 
anim.stop(false);//默认为false
// 为 true 时, 动画停止时会立刻跳到最后一帧（触发 complete 回调）
anim.stop(true);</code></pre>
<h4>pause()</h4>
<p>在动画实例上调用, 暂停当前动画实例的动画.</p>
<h4>resume()</h4>
<p>继续当前动画实例的动画.</p>
<h4>静态方法 isRunning(elem)</h4>
<p>判断elem上是否有动画对象在执行</p>
<pre><code>Anim.isRunning(elem);</code></pre>
<h4>静态方法 isPaused()</h4>
<p>用于判断 elem 上是否有动画对象在暂停，用法同上</p>
<h4>静态方法 stop()</h4>
<p>停止某元素上的动画（集合）.调用方法。</p>
<p><code>Anim.stop (elem, end, clearQueue, queueName)</code></p>
<ul>
<li>elem (HTMLElement|window) – 作用动画的元素节点.</li>
<li>end (Boolean) – 此参数同实例方法 stop() 中的 finish 参数.</li>
<li>clearQueue (Boolean) – 默认为 false, 是否清除动画队列中余下的动画.</li>
<li>queueName (String) – 队列名字，不设置此值，表示停止所有队列中的所有动画，设置 queueName 后, 表示停止元素上指定队列中的所有动画，取值包括：<ul>
<li>null，表示默认队列的动画</li>
<li>false 表示不排队的动画</li>
<li>string 类型表示指定名称的队列的动画</li>
</ul>
</li>
</ul>
<h4>静态方法 pause()</h4>
<p>暂停某元素上的动画（集合）.调用方法，其中queueName参数含义同上</p>
<p><code>Anim.pause (elem, queueName)</code></p>
<h4>静态方法 resume()</h4>
<p>继续某元素上的动画，调用方法，其中queueName含义同上</p>
<p><code>Anim.resume (elem, queueName)</code></p>
<h2>动画实例的事件</h2>
<h4>complete 事件</h4>
<p>动画结束后会触发<code>complete</code>事件</p>
<h2>Demos</h2>
<ul>
<li><a href="http://docs.kissyui.com/docs/html/demo/core/anim/demo1.html">基本动画示例</a></li>
<li><a href="http://docs.kissyui.com/docs/html/demo/core/anim/demo2.html">滚动属性动画实例</a></li>
<li><a href="http://docs.kissyui.com/docs/html/demo/core/anim/demo3.html">节点实例动画操作</a></li>
<li><a href="http://docs.kissyui.com/docs/html/demo/core/anim/demo4.html">窗口滚动示例</a></li>
<li><a href="http://docs.kissyui.com/docs/html/demo/core/anim/demo5.html">节点上的 stop 示例</a></li>
<li><a href="http://docs.kissyui.com/docs/html/demo/core/anim/demo6.html">动画队列支持</a></li>
<li><a href="http://docs.kissyui.com/docs/html/demo/core/anim/easing.html">easy可视化</a></li>
</ul>
<style>
#photo-list img  {
border: 1px solid grey;
padding: 4px;
margin: 8px;
}
.loading {
background: transparent url(http://docs.kissyui.com/source/_static/loading.gif) no-repeat;
width: 100px;
height: 100px;
margin: 20px;
}
div.demo {
background: none repeat scroll 0 0 #F8F8F6;
border: 1px solid #D1D1D1;
border-radius: 2px 2px 2px 2px;
margin: 8px 0;
padding: 10px;
}
</style>


<div id="disqus_thread"></div>
<script>
    if((window.location.hostname.indexOf("kissyui.com")!=-1 )&& window.localStorage.getItem("kissy-commment")!="0"){
    /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
    var disqus_shortname = 'kissy-docs'; // required: replace example with your forum shortname

    // The following are highly recommended additional parameters. Remove the slashes in front to use.
     //var disqus_identifier = '/anim';
     //var disqus_url = window.location;

    /* * * DON'T EDIT BELOW THIS LINE * * */
    (function() {
        var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
        dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    })();
    }
</script>



      
  <style>
	.github-btn {
		border: 0 none;
		overflow: hidden;
		margin-top:4px;
	}
	footer {
		border-top:1px solid #e2e2e2;
		padding-top:20px;
		clear:both;
	}
	/* iPhone 及以下 */
	@media only screen and (max-width: 767px) {
		.github-link {
			display:none;
		}
	}
  </style>
  <footer>




	<div class="text-center">
		©2013 - 2033 KISSY UI LIBRARY
		<br /> <iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=kissyteam&amp;repo=kissy&amp;type=watch&amp;count=true" width="100" height="20" title="Star on GitHub"></iframe> 
	<iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=kissyteam&amp;repo=kissy&amp;type=fork&amp;count=true" width="102" height="20" title="Fork on GitHub"></iframe>
	</div>
  </footer>
    </article>
  </div>
  <a target="_blank" href="https://github.com/kissyteam/kissy" class="github-link"><img alt="Fork me on GitHub" src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" style="position: absolute; top: 0; right: 0; border: 0; z-index: 50"></a>
  <script>
	var S = KISSY;
	(function(){
		S.use('node',function(S){
			S.all('code').each(function(node){
				var className = node.attr('class');
				if(/^lang-/.test(className)){
					var tc = className.replace(/^lang-/,'');
					node.replaceClass(className,tc);
				}
			});
			hljs.tabReplace = '    ';
			hljs.initHighlighting();
		});
	})();
	(function(){
		var h3s = document.getElementsByTagName('h3');
		for(var i = 0;i<h3s.length;i++){
			var str = S.trim(h3s[i].innerHTML);
			try{
				str = str.match(/\w+/)[0];
			}catch(e){
				continue;
			}
			h3s[i].innerHTML = '<a name="'+str+'"></a>' + h3s[i].innerHTML;
		}
	})();
  </script>
</body>
</html>
